<template>
    <el-card>
        <!-- sku分页表格 -->
        <el-table :data="tableData" border stripe>
            <el-table-column type="index" width="60" label="序号" align="center" />
            <el-table-column label="名称" prop="skuName" />
            <el-table-column label="描述" prop="skuDesc" />
            <el-table-column label="默认图片">
                <template v-slot="{row}">
                    <img :src="row.skuDefaultImg" height="130" width="160" />
                </template>
            </el-table-column>
            <el-table-column label="重量" prop="weight" />
            <el-table-column label="价格" prop="price" />
            <el-table-column label="操作" width="280">
                <template v-slot="{row}">
                    <el-button v-if="!row.isSale" type="success" size="small" @click="up(row.id)" icon="ele-Top"
                        title="上架"></el-button>
                    <el-button v-else type="info" size="small" @click="down(row.id)" icon="ele-Bottom" title="下架">
                    </el-button>
                    <el-button type="primary" size="small" @click="edit" icon="ele-Edit" title="编辑"></el-button>
                    <el-button type="info" size="small" @click="look(row.id)" icon="ele-MoreFilled" title="查看">
                    </el-button>
                    <el-button type="danger" size="small" @click="deleteSku(row.id)" icon="ele-Delete" title="删除">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination v-model:current-page="page" v-model:page-size="limit" :pager-count="7" :total="total"
            :page-sizes="[3, 5, 7, 10]" layout="prev, pager, next , sizes, total"></el-pagination>

        <!-- 抽屉 -->
        <el-drawer v-model="drawer" size="50%">
            <el-row>
                <el-col :span="6">名称</el-col>
                <el-col :span="18">{{skuInfo.skuName}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6">描述</el-col>
                <el-col :span="18">{{skuInfo.skuDesc}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6">价格</el-col>
                <el-col :span="18">{{skuInfo.price}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6">平台属性</el-col>
                <el-col :span="18">
                    <el-tag 
                        v-for="item in skuInfo.skuAttrValueList" 
                        :key="item.id"
                        type="success" 
                        size="small"
                    >
                    {{ item.attrName }}-{{ item.valueName }}
                    </el-tag>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">销售属性</el-col>
                <el-col :span="18">
                    <el-tag 
                        v-for="item in skuInfo.skuSaleAttrValueList" 
                        :key="item.id"
                        type="success" 
                        size="small"
                    >
                    {{ item.saleAttrName }}-{{ item.saleAttrValueName }}
                    </el-tag>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">商品图片</el-col>
                <el-col :span="18">
                    <!-- 轮播图 -->
                    <el-carousel  autoplay="true" trigger="hover">
                        <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                            <img :src="item.imgUrl" width="450" height="450" />
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>
        </el-drawer>
    </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Sku",
});
</script>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue"
import { ElMessage } from "element-plus";
import { requestSkuPageList, requestOnSale, requestCancelSale, requestDeleteSku , requestGetSkuById} from "@/api/sku"
import type { SkuPageListType , SkuListItemType} from "@/api/sku"


//1.定义表格数据
const tableData = ref<SkuPageListType>([])
//2.定义页码数据
const page = ref(1)
const limit = ref(10)
const total = ref(0)


//封装函数请求sku分页列表
const getpageList = async () => {
    try {
        //发送分页请求
        const result = await requestSkuPageList(page.value as number, limit.value as number)
        //把请求回来的数据保存到响应式数据中
        tableData.value = result.records
        //把总页数保存到数据中
        total.value = result.total
    } catch {
        ElMessage.error("请求sku分页列表失败!")
    }
}
//3.初始化请求sku分页列表
onMounted(() => {
    getpageList()
})

//4.监听页码改变重新发送请求
watch([page, limit], () => {
    getpageList()
})

//5.上架
const up = async (id: number) => {
    try {
        //上架请求
        await requestOnSale(id)
        //重新请求分页列表
        getpageList()
        //成功提示
        ElMessage.success("上架成功!")
    } catch {
        //失败提示
        ElMessage.error("上架失败!")
    }
}

//6.下架
const down = async (id: number) => {
    try {
        //下架请求
        await requestCancelSale(id)
        //重新请求分页列表
        getpageList()
        //成功提示
        ElMessage.success("下架成功!")
    } catch {
        //失败提示
        ElMessage.error("下架失败!")
    }
}

//7.编辑
const edit = async () => {
    ElMessage.info("该功能正在开发中......")
}


//定义数据控制抽屉显示隐藏
const drawer = ref(false)
//定义数据保存sku详情
const skuInfo = ref<SkuListItemType>({
    skuName: "",
    skuDesc: "",
    price: 0,
    weight: "",
    category3Id: null,
    skuDefaultImg: "",
    skuImageList: null,
    skuAttrValueList: null,
    skuSaleAttrValueList: null,
})
//8.查看
const look = async (id: number) => {
    try {
        //请求sku详情
        const result = await requestGetSkuById(id)
        //把请求回来的sku详情赋值给数据
        skuInfo.value = result 
        //打开抽屉
        drawer.value = true
    } catch {
        //失败提示
        ElMessage.error("请求sku详情失败!")
    }
}

//9.删除
const deleteSku = async (id: number) => {
    try {
        //删除请求
        await requestDeleteSku(id)
        //重新请求分页列表
        getpageList()
        //删除提示
        ElMessage.success("删除成功!")
    } catch {
        //失败提示
        ElMessage.error("删除失败!")
    }
}

</script>